<template>
  <el-dialog v-model="addVisible" :title="titles" width="50%" :before-close="handleClose" >
    <div id="printarea">
      <barcode-gen :value="info.deviceCode"  :index="info.deviceCode" /> 
    </div>
      <template #footer>
          <span class="dialog-footer">
              <el-button type="primary" size="small" v-print="printObj"> 确定打印 </el-button>
              <el-button  size="small" @click="close">取消</el-button>
          </span>
      </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch, toRaw } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage,ElLoading } from 'element-plus'
import print from 'vue3-print-nb'

import BarcodeGen from './BarcodeGen.vue'


directives: {
  print
}
const props = defineProps({ 
  info: Array
})
const addVisible = ref(false) // 弹窗的是否展示
const openpreview = async (row: Object) => {
  addVisible.value = true 
}
defineExpose({ openpreview }) // 提供 open 方法，用于打开弹窗

const titles=ref()
const loadingRef=ref()
const printObj = ref(

  {
      id: "printarea",
      popTitle: "",
      extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
      extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      previewBeforeOpenCallback () {
          loadingRef.value = ElLoading.service({
              lock: true,
              text: '正在加载预览窗口',
              background: 'rgba(0, 0, 0, 0.7)',
          })
          console.log('正在加载预览窗口')
      },

      previewOpenCallback () {
          loadingRef.value.close()
        console.log('已经加载完预览窗口')
      },

      beforeOpenCallback (vue:any) {
          loadingRef.value = ElLoading.service({
              lock: true,
              text: '正在加载预览窗口',
              background: 'rgba(0, 0, 0, 0.7)',
          })
      //   vue.printLoading = true
        console.log('打开之前')
      },

      openCallback (vue:any) {
          loadingRef.value.close()
      //   vue.printLoading = false
        console.log('执行了打印')
      },

      closeCallback () {
        console.log('关闭了打印工具')
      },

      clickMounted (vue:any) {
        console.log('点击了打印按钮')
        emits("Closeprint")
      }

  }

)

const tableData = ref<any>([]) 
//监听
watch(
  () => props.info,
  (newInfo, oldInfo) => {
      if (newInfo != undefined) {
          tableData.value=newInfo 
          console.log("tableData.value", tableData.value)
      } else {

        
      }

  },
  { immediate: true } 

);

//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["Closeprint"])
const handleClose = (done: () => void) => {
  emits("Closeprint")
  addVisible.value = false
}

onMounted(() => {
})

const close = () => {
  emits("Closeprint")
  addVisible.value = false
}
</script>

<style lang="scss" scoped>

@page {
    size: auto;
    margin: 0mm;
  }


#printarea  {
  text-align: center;
}
</style>